<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="userName" label="用户名" width="180" />
      <el-table-column prop="password" label="密码" width="180" />
      <el-table-column prop="remark" label="备注" />
      <el-table-column fixed="right" label="Operations" width="120">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click="deleteUser(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive } from "vue";
import _service from "../../service/host";

const tableData = reactive<any[]>([]);
const getUserList = () => {
  _service
    .getList({})
    .then((res: any) => {
      if (res?.data?.data?.length) {
        res.data.data.forEach((item: any, index: number) => {
          tableData.push({
            id: index + 1,
            ...item,
          });
        });
      }
      console.log(tableData);
    })
    .catch((err) => {
      console.error(err);
    });
};
onMounted(() => {
  getUserList();
});
const deleteUser = (item: { userName: any }) => {
  ElMessageBox.confirm("删除当前数据?", "Warning", {
    confirmButtonText: "OK",
    cancelButtonText: "Cancel",
    type: "warning",
  })
    .then(() => {
      _service
        .deleteItem({ userName: item.userName })
        .then((res: any) => {
          console.log(res);
          getUserList();
          ElMessage({
            type: "success",
            message: "删除成功",
          });
        })
        .catch((err) => {
          console.error(err);
        });
    })
    .catch(() => {
      console.log("quxiao");
    });
};
</script>
<style lang="scss" scoped></style>
